{% extends "market/base.html" %}

{% block header %}
  <h1>
    {{ stock.symbol }}({{ time }})(模拟环境)
    <a class="btn btn-info btn-lg" href="{{ stock.get_absolute_url }}" role="button">当日数据</a>
    
    <a class="btn btn-info btn-lg" href="{{ stock.get_daily_info_url }}" role="button">历史数据</a>

    <a class="btn btn-info btn-lg" href="{{ stock.get_tick_info_url }}" role="button">tick截面</a>
  </h1>
{% endblock header %}

{% block content %}

<h2>样例图（未完成）</h2>
<div id="container" style="min-width:400px;height:400px">图表加载中...</div>
<h2>数据</h2>
<p>开高低收：{{candles}}</br>
交易量：{{volume}}
</p>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">

Highcharts.setOptions({
	lang: {
		rangeSelectorZoom: ''
	}
});
$.getJSON('https://data.jianshukeji.com/stock/history/000001', function (data) {
	if(data.code !== 1) {
		alert('读取股票数据失败！');
		return false;
	}
	data = data.data;
	var ohlc = [],
		volume = [],
		dataLength = data.length,
		// set the allowed units for data grouping
		groupingUnits = [[
			'week',                         // unit name
			[1]                             // allowed multiples
		], [
			'month',
			[1, 2, 3, 4, 6]
		]],
		i = 0;
	for (i; i < dataLength; i += 1) {
		ohlc.push([
			data[i][0], // the date
			data[i][1], // open
			data[i][2], // high
			data[i][3], // low
			data[i][4] // close
		]);
		volume.push([
			data[i][0], // the date
			data[i][5] // the volume
		]);
	}
	// create the chart
	var chart = Highcharts.stockChart('container', {
		rangeSelector: {
			selected: 1,
			inputDateFormat: '%Y-%m-%d'
		},
		title: {
			text: '平安银行历史股价'
		},
		xAxis: {
			dateTimeLabelFormats: {
				millisecond: '%H:%M:%S.%L',
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%H:%M',
				day: '%m-%d',
				week: '%m-%d',
				month: '%y-%m',
				year: '%Y'
			}
		},
		tooltip: {
			split: false,
			shared: true,
		},
		yAxis: [{
			labels: {
				align: 'right',
				x: -3
			},
			title: {
				text: '股价'
			},
			height: '65%',
			resize: {
				enabled: true
			},
			lineWidth: 2
		}, {
			labels: {
				align: 'right',
				x: -3
			},
			title: {
				text: '成交量'
			},
			top: '65%',
			height: '35%',
			offset: 0,
			lineWidth: 2
		}],
		series: [{
			type: 'candlestick',
			name: '平安银行',
			color: 'green',
			lineColor: 'green',
			upColor: 'red',
			upLineColor: 'red',
			tooltip: {
			},
			navigatorOptions: {
				color: Highcharts.getOptions().colors[0]
			},
			data: ohlc,
			dataGrouping: {
				units: groupingUnits
			},
			id: 'sz'
		},{
			type: 'column',
			data: volume,
			yAxis: 1,
			dataGrouping: {
				units: groupingUnits
			}
		}]
	});
});

</script>

{% endblock content %}
